<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <ul>
        <li v-for="(m,index) in ob" :key="index">{{ index }}:{{ ob[m] }}</li>
      </ul>
      <button @click="change">改变</button>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>

    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            ob: {
              name: "www",
              age: 12,
              address: "南京"
            }
          };
        },
        methods: {
          change() {
            // this.ob= Object.assign({},this.ob, { num: "1111" });
            // this.$forceUpdate();
            // this.$set(this.ob, "name", "1111");
            this.ob["num"] = 11111;
            //原对象添加新属性视图不会响应  改变原对象地址就可以   例如创建一个新对象，直接复制
            console.log(this.ob);

            //这种相当于创建新对象，改变了地址
            this.ob = Object.assign({ a: 111 }, { num: "1111" });
          }
        }
      });
    </script>
  </body>
</html>
